<template>
    <div id="login_box">
        <div class="login_bgc">
            <div class="logo">
                <img src="@/assets/login_img/logo.png" alt="">
            </div>
            <div class="logo_description">
                这里是文字示例，最多显示两行折行
            </div>
            <div class="login_img">
                <img src="@/assets/login_img/loginImg.png" alt="">
            </div>
        </div>
        <div class="login_content">
            <div class="title">欢迎登录</div>
            <el-form class="el_form_custom" :model="loginForm" :rules="rule" ref="loginForm">
                <el-form-item label="邮箱" prop="email">
                    <el-input placeholder="请输入邮箱" class="el_input_custom" v-model="loginForm.email"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input placeholder="请输入密码"  v-model="loginForm.password"></el-input>
                </el-form-item>
            </el-form>
            <div class="checkbox">
                <el-checkbox v-model="isSaveSercet">记住我</el-checkbox>
                <div class="forget">忘记密码?</div>
            </div>
            <el-button class="el_button_custom" @click="btnOk">立即登录</el-button>
            <div>还没有账号? <router-link to="/reigster" class="router_link_custom">去注册</router-link></div>
        </div>
    </div>
</template>
<script>
export default {
    name:'LoginPage',
    data(){
        return {
            loginForm:{
                email:'3360958536@qq.com',
                password:"123456"
            },
            isSaveSercet:false,
            rule:{
                email:[
                    {
                        required:true,
                        message:'邮箱不能为空',
                        trigger:'blur'
                    },{
                        pattern:/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/,
                        message:'邮箱格式不正确',
                        trigger:'blur'
                    }
                ],
                password:[
                    {
                        required:true,
                        message:'密码不能为空',
                        trigger:'blur'
                    },{
                        min:4,
                        max:16,
                        message:'密码长度在4-16位之间',
                        trigger:'blur'
                    }
                ]
            }
        }
    },
    methods:{
        btnOk(){
            this.$refs.loginForm.validate(isOk=>{
                if(isOk){
                    this.$message.success('登录成功')
                    this.$router.push('/dashboard')
                }
            })
        }
    }
}
</script>
<style lang="scss" scoped>
#login_box{
    height: 100%;
    width: 100%;
    display:flex;
    justify-content: center;
    align-items: center;
    .login_bgc{
        height: 100%;
        width: 50%;
        background-color: rgba(63, 140, 255, 1);
        display: flex;
        flex-direction: column;
        justify-content: start;
        align-items: start;
        .logo{
            width: 50px;
            height: 50px;
            margin-top: 120px;
            margin-left: 200px;
            background-color: #fff;
            img{
                width: 100%;
                height: 100%;
            }
        }
        .logo_description{
            font-size: 40px;
            line-height: 57.92px;
            color: rgba(255, 255, 255, 1);
            width: 409px;
            margin-left: 174px;
            margin-top: 41px;
        }
        .login_img{
            width: 500px;
            height: 373px;
            opacity: 0.92;
            margin-top: 148px;
            margin-left: 174px;
        }
    }
    .login_content{
        display: flex;
        align-items: center;
        justify-content: start;
        flex-direction: column;
        height: 100%;
        width: 50%;
        .title{
            width: 403px;
            height: 31px;
            text-align: center;
            line-height: 31px; 
            font-size: 36px;
            margin-bottom: 48px;
            color: rgba(10, 22, 41, 1);
            margin-top: 153px;
        }
        .el_form_custom{
            width: 403px;
        }
        .checkbox{
            width: 403px;
            height: 22px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .forget{
                font-size: 16px;
                font-weight: 400;
                line-height: 22px;
                color: rgba(125, 133, 146, 1);
            }
            .forget:hover{
                font-weight: 600;
                cursor: pointer;
                color:rgba(63, 140, 255, 1);
            }
        }
        .el_button_custom{
            width: 180px;
            height: 48px;
            opacity: 1;
            border-radius: 14px;
            background: rgba(63, 140, 255, 1);
            box-shadow: 0px 6px 12px  rgba(63, 140, 255, 0.26);
            font-size: 16px;
            color:#fff;
            margin-top: 61px;
            margin-bottom: 18px;
        }
        
    }
    
}
::v-deep(.el-input__inner){
    height:55px !important;
    font-size: 15px;

}
</style>